<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代理模式</title>
</head>
<body>
    <img src="https://img2.baidu.com/it/u=1284852827,262692336&fm=26&fmt=auto&gp=0.jpg" 
    origin_src="https://img2.baidu.com/it/u=4251059536,2165781887&fm=26&fmt=auto&gp=0.jpg" alt="">
    <script>
        // 图片加载损性能
        // 菊花图 loading.gif 占位图 请求一次,就会缓存
        window.onload = function(){
            const oImg = document.querySelector('img');
            const origin_src = oImg.getAttribute('origin_src');
            const temImg = document.createElement('img');
            // 网络进程,DOM 不去阻塞页面的第一次展示
            temImg.onload = function(){
                oImg.src = origin_src;
            }
            temImg.src = origin_src;
            // document.body.appendChild(temImg);
        }
    </script>
</body>
</html>